<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工单提交API测试</title>
    <link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'ZCOOL KuaiLe', 'Ma Shan Zheng', 'Microsoft YaHei', cursive, sans-serif;
        }

        :root {
            --primary: #ff6b8b;
            --primary-light: #ff9fb0;
            --secondary: #8a5cf2;
            --secondary-light: #b594ff;
            --accent: #ffb74d;
            --background: #fff0f3;
            --surface: #ffffff;
            --text: #5d4037;
            --border: #ffccd5;
        }

        body {
            background-color: var(--background);
            color: var(--text);
            background-image: 
                radial-gradient(var(--primary-light) 2px, transparent 2px),
                radial-gradient(var(--secondary-light) 2px, transparent 2px);
            background-size: 60px 60px;
            background-position: 0 0, 30px 30px;
            padding: 0;
            margin: 0;
            overflow-x: hidden;
        }

        #background-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-image: url('../assets/image/bd.webp');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        .container {
            max-width: 800px;
            margin: 2rem auto;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 24px;
            box-shadow: 0 10px 30px rgba(255, 107, 139, 0.2);
            padding: 2rem;
            position: relative;
            overflow: hidden;
            border: 3px solid var(--border);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .container::before {
            content: '';
            position: absolute;
            top: -20px;
            right: -20px;
            width: 100px;
            height: 100px;
            background-color: var(--accent);
            border-radius: 50%;
            opacity: 0.2;
            z-index: -1;
            animation: float 6s ease-in-out infinite;
        }

        .container::after {
            content: '';
            position: absolute;
            bottom: -30px;
            left: -30px;
            width: 150px;
            height: 150px;
            background-color: var(--secondary);
            border-radius: 50%;
            opacity: 0.1;
            z-index: -1;
            animation: float 8s ease-in-out infinite 2s;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            50% {
                transform: translateY(-20px) rotate(10deg);
            }
        }

        h1 {
            color: var(--primary);
            font-size: 2.5rem;
            text-shadow: 2px 2px 0px var(--primary-light);
            letter-spacing: 2px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            margin-bottom: 2rem;
        }

        h1::before,
        h1::after {
            content: '✿';
            color: var(--secondary);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5rem;
        }

        h1::before {
            left: -30px;
        }

        h1::after {
            right: -30px;
        }

        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
            color: var(--primary);
            font-size: 1.1rem;
        }

        input[type="text"],
        select,
        textarea {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid var(--border);
            border-radius: 16px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background-color: rgba(255, 255, 255, 0.8);
            color: var(--text);
        }

        input[type="text"]:focus,
        select:focus,
        textarea:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 4px rgba(255, 107, 139, 0.2);
        }

        textarea {
            resize: vertical;
            min-height: 120px;
        }

        /* 评分样式 */
        .rating {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .rating input[type="radio"] {
            display: none;
        }

        .rating label {
            cursor: pointer;
            padding: 8px 16px;
            border: 2px solid var(--border);
            border-radius: 20px;
            transition: all 0.3s;
            margin: 0;
            font-size: 0.9rem;
            font-weight: bold;
            background-color: white;
        }

        .rating input[type="radio"]:checked + label {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
            box-shadow: 0 2px 8px rgba(255, 107, 139, 0.4);
        }

        .anime-btn {
            background: linear-gradient(45deg, var(--primary), var(--primary-light));
            color: white;
            border: none;
            padding: 12px 30px;
            font-size: 1.2rem;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(255, 107, 139, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
        }

        .anime-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 107, 139, 0.6);
        }

        .anime-btn:active {
            transform: translateY(1px);
            box-shadow: 0 3px 10px rgba(255, 107, 139, 0.4);
        }

        #result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 12px;
            text-align: center;
            font-size: 1.1rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 2px solid;
            display: none;
        }

        .success {
            background-color: rgba(76, 175, 80, 0.9);
            color: white;
            border-color: #a5d6a7;
        }

        .error {
            background-color: rgba(244, 67, 54, 0.9);
            color: white;
            border-color: #f5b7b1;
        }

        .info-box {
            background-color: rgba(255, 255, 255, 0.8);
            border: 2px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem;
            margin-top: 2rem;
        }

        .info-box h2 {
            color: var(--primary);
            margin-bottom: 1rem;
            text-align: center;
        }

        .info-box pre {
            background-color: var(--surface);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 1rem;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
        }

        .info-box code {
            color: var(--secondary);
        }

        @media (max-width: 768px) {
            .container {
                margin: 1rem;
                padding: 1.5rem;
            }

            h1 {
                font-size: 2rem;
            }

            h1::before,
            h1::after {
                display: none;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>
    <div id="background-container"></div>
    <div class="container">
        <h1>工单提交API测试</h1>
        <form id="ticketForm">
            <div class="form-group">
                <label for="qqNumber">QQ号码:</label>
                <input type="text" id="qqNumber" name="qqNumber" required>
            </div>
            
            <div class="form-group">
                <label for="feedbackType">反馈类型:</label>
                <select id="feedbackType" name="feedbackType" required>
                    <option value="account">账号问题 (Account Issue)</option>
                    <option value="function">功能故障 (Function Failure)</option>
                    <option value="suggestion">功能建议 (Feature Suggestion)</option>
                    <option value="performance">性能问题 (Performance Issue)</option>
                    <option value="security">安全问题 (Security Issue)</option>
                    <option value="other">其他问题 (Other Issue)</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="severity">严重程度 (1-5):</label>
                <div class="rating" id="severityRating">
                    <input type="radio" id="severity1" name="severity" value="1" required>
                    <label for="severity1">1星 (轻微)</label>
                    <input type="radio" id="severity2" name="severity" value="2">
                    <label for="severity2">2星</label>
                    <input type="radio" id="severity3" name="severity" value="3">
                    <label for="severity3">3星 (一般)</label>
                    <input type="radio" id="severity4" name="severity" value="4">
                    <label for="severity4">4星</label>
                    <input type="radio" id="severity5" name="severity" value="5">
                    <label for="severity5">5星 (严重)</label>
                </div>
            </div>
            
            <div class="form-group">
                <label for="description">问题描述:</label>
                <textarea id="description" name="description" rows="5" required></textarea>
            </div>
            
            <button type="submit" class="anime-btn">提交工单</button>
        </form>
        
        <div id="result"></div>
        
        <div class="info-box">
            <h2>API参数说明与调用示例</h2>
            <h3>请求参数</h3>
            <ul>
                <li><strong>qqNumber</strong>: QQ号码 (5-11位数字)</li>
                <li><strong>feedbackType</strong>: 反馈类型 (account, function, suggestion, performance, security, other)</li>
                <li><strong>severity</strong>: 严重程度 (1-5，数字)</li>
                <li><strong>description</strong>: 问题描述 (最多2000字符)</li>
            </ul>
            
            <h3>调用示例</h3>
            <p>您可以直接通过以下URL访问API接口:</p>
            <pre><code id="api-url-example">/api/api.php</code></pre>
            <p>请使用POST方法提交表单数据到上述URL。</p>
        </div>
    </div>

    <script>
        // 动态更新API URL示例
        document.addEventListener('DOMContentLoaded', function() {
            const apiUrlExample = document.getElementById('api-url-example');
            if (apiUrlExample) {
                apiUrlExample.textContent = window.location.origin + '/api/api.php';
            }
        });
        
        document.getElementById('ticketForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 手动收集表单数据，确保正确获取单选按钮的值
            const data = {
                qqNumber: document.getElementById('qqNumber').value,
                feedbackType: document.getElementById('feedbackType').value,
                severity: document.querySelector('input[name="severity"]:checked').value,
                description: document.getElementById('description').value
            };
            
            // 动态获取当前域名和路径
            const apiUrl = window.location.origin + '/api/api.php';
            fetch(apiUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams(data).toString()
            })
            .then(response => response.json())
            .then(data => {
                const resultDiv = document.getElementById('result');
                resultDiv.style.display = 'block';
                if (data.success) {
                    resultDiv.className = 'success';
                    resultDiv.textContent = '工单提交成功! 工单ID: ' + data.ticket_id;
                } else {
                    resultDiv.className = 'error';
                    resultDiv.textContent = '提交失败: ' + data.message;
                }
            })
            .catch(error => {
                const resultDiv = document.getElementById('result');
                resultDiv.style.display = 'block';
                resultDiv.className = 'error';
                resultDiv.textContent = '请求失败: ' + error.message;
            });
        });
    </script>
</body>
</html>